<template>
    <div class="bodys">
        <div class="top">
            <div class="logo">
                <img src="../../assets/mine/logo5.png"/>
                 <button @click="change">中英文切换</button>
            </div>
        </div>
        <div class="mid">
            <div @click="extract"><img src="../../assets/mine/addmoney.png" ><span>{{$t('ws_assets.coin')}}</span></div>
            <div @click="outcash"><img src="../../assets/mine/outcash.png" ><span>{{$t('ws_assets.extract')}}</span></div>
            <div @click="accounts"><img src="../../assets/mine/changeCash.png" ><span>{{$t('ws_assets.transfer')}}</span></div>
        </div>
        <img src="../../assets/mine/midpicture.png" alt="" class="midImg">
        <div class="bottom">
            <p class="title">{{$t('ws_assets.myAccount')}}</p>
            <div class="content">
                <span>{{$t('ws_assets.AcBa')}}</span>
                <span>{{$t('ws_assets.Cuin')}}</span>
            </div>
            <div class="content">
                <span>{{balance.account}}</span>
                <span>{{balance.tot}}</span>
            </div>
        </div>


        <div class="bottoms">

            <div class="bot btt"  @click="record">
                <img class="o" src="../../assets/mine/tradeRecord.png"/>
                <div>{{$t('ws_assets.transactionRecord')}}</div>
                 <img class="t" src="../../assets/mine/right.png">
            </div>

            <div class="bot btt" @click="myteams">
                <img class="o" src="../../assets/mine/teams.png"/>
                <div>{{$t('ws_assets.team')}}</div>
                <img  class="t" src="../../assets/mine/right.png">
            </div>
            <div class="bot btt" @click="toMycode">
                <img class="o" src="../../assets/mine/teams.png"/>
                <div>{{$t('ws_assets.invitationCode')}}</div>
                <img  class="t" src="../../assets/mine/right.png">
            </div>
            <div class="bot" @click="logout">
                <img class="o" src="../../assets/mine/logout.png"/>
                <div>{{$t('ws_assets.signout')}}</div>
                 <img  class="t" src="../../assets/mine/right.png">
            </div>
        </div>
    </div>
</template>
<script>
import Header from "@/components/Header";
import { hold } from '@/api/getData'
export default {
    data(){
        return {
            user:JSON.parse(sessionStorage.getItem("user")),
            balance:'',
        }
    },
    methods: {
        outcash(){
            this.$router.push("/trade?sell=1")
        },
        extract(){
            this.$router.push('/extract')
        },
        accounts(){
            this.$router.push('/accounts')
        },
        toMycode(){
            this.$router.push('/mycode')
        },
        record(){
            this.$router.push('/record')
        },
        logout(){
            sessionStorage.clear()
            this.$router.push('/')
        },
        myteams(){
            this.$router.push('/myteams')
        },
        hold(){
        let data = {
            user_id:this.user.user_id,
            }
        hold(data).then(res => {
            this.balance = res.data.result;
        })           
        },
        // 中英文切换
        change(){
            let e = (localStorage.lang==='cn'?'en':'cn')
            localStorage.setItem('lang',e);
            this.$i18n.locale = e;
            window.location.reload()
        }
    },
    mounted(){
        this.hold();
        this.change()
    },
    components:{
    }
}
</script>
<style lang="stylus" scoped>
button{
    background :#fff;
}
    .bodys{
        background :#f8f8ff;
        height:100vh;
        width:100vw;
        overflow hidden;
    }
    .midImg{
        height:1.7rem;
        width:90vw;
        margin-left:5vw;
    }
    .top{
        width :100vw;
        height:27vh;
        background :#0F1117;
        p{  
            margin:0;
            padding-top:.4rem;
            margin-left:.2rem; 
            font-size:.5rem;
            color:#BE9047;
            .pone{
                padding:0;
                margin-top:.1rem;
                font-size:.6rem;
                color:#fff;
            }
            .ptwo{
                font-size:.3rem;
            }
        }
    }
    .mid{
        border-radius:7px;
        background: #fff;
        width:90vw;
        margin:-1rem auto 0.2rem auto; 
        display:flex;
        height :11vh;
        z-index:999;
        div{
            flex :1;
            font-size :15px;
            display:flex;
            align-items :center;
            img{
                display:inline-block;
                width :.6rem;
                height:.5rem;
                margin-left :.3rem;
            }
            span{
                margin-left :.15rem;
            }
        }
        
    }
    .bottom{
        background: #fff;
        position: relative;
        p{
            font-size:.35rem;
            margin:0;
        }
        .title{
            height :5vh;
            line-height:5vh; 
            border-bottom:1px solid #C9C9C9;
            width :92vw;
            margin-left:4vw;
        }
        .titles{
            height :5vh;
            line-height:5vh; 
            text-indent :.3rem;
        }
        .content{
            display :flex;
            font-size :15px;
            text-align :center;
            >span{
                height :5vh;
                line-height:5vh;
                flex:1
                text-indent :.3rem;
            }   
        }
    }
    .bottoms{
        >P{
            margin :0;
            width :100%;
            height :6.7vh;
            border-bottom:1px solid  #E4E7ED;
            display:flex;
            justify-content:space-between;
            >span{
                font-size:.35rem;
                display:flex;
                line-height :6.7vh;
                >img{
                    display : inline-block;
                    width :.7rem;
                    height:.7rem;
                    margin:.09rem;
                    margin-left:.2rem;
                }
            }
            .backs{
                margin-right:.2rem;
                color :#999999;
                font-size :.5rem;
            }
        }
        width:100%;
        background:#fff;
        margin-top:.2rem;
    }
    .logo{
        padding-left: 42%;
        padding-top: 20px;

    }
    .logo img{
        height:60px;
    }
    .bot{
        height: 0.8rem;
        margin-bottom: 0.04rem;
        margin-top: 0.04rem;
        line-height :0.8rem;
        font-size: 0.3rem;
        margin:0 4vw;
       
    }
    .o{
            height: 0.6rem;
            padding-bottom: 0.08rem;
            padding-left: 0.08rem;
            padding-right: 0.3rem;
            padding-top: 0.1rem;
            float :left;
        }
        .bot div{
                width: 31vw;
                float: left;
                font-size: 0.29rem;
        }
        .t{
                width: 0.175rem;
                float: right;
                height: 0.375rem;
                padding-right: 0.1rem;
                padding-top: 0.18rem;
        }
        .btt{
                border-bottom : 1px #c9c9c9 solid;
        }
</style>
